import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'

@Component({
  selector: 'app-ex0303',
  templateUrl: './ex0303.component.html',
  styleUrls: ['./ex0303.component.scss']
})
export class Ex0303Component implements OnInit, AfterViewInit {
  private ctx: any

  @ViewChild('canvas')
  set canvas(ref: ElementRef) {
    this.ctx = ref.nativeElement.getContext('2d')
  }

  constructor() {
  }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    // this.draw1(this.ctx)
    this.draw2(this.ctx)
  }

  draw1(ctx): void {
    ctx.moveTo(30, 120)
    ctx.quadraticCurveTo(100, 20, 160, 120)
    ctx.stroke()
  }

  draw2(ctx): void {
    ctx.moveTo(75, 25)
    ctx.quadraticCurveTo(25, 25, 25, 62)
    ctx.quadraticCurveTo(25, 100, 50, 100)
    ctx.quadraticCurveTo(50, 120, 30, 125)
    ctx.quadraticCurveTo(60, 120, 65, 100)
    ctx.quadraticCurveTo(125, 100, 125, 62)
    ctx.quadraticCurveTo(125, 25, 75, 25)
    ctx.stroke()
  }
}
